import React from 'react';
import { Spin, Typography } from '@douyinfe/semi-ui';

const { Text } = Typography;

interface LoadingStateProps {
  text?: string;
  size?: 'small' | 'middle' | 'large';
  spinning?: boolean;
  className?: string;
  children?: React.ReactNode;
}

export const LoadingState: React.FC<LoadingStateProps> = ({
  text = '加载中...',
  size = 'middle',
  spinning = true,
  className = '',
  children,
}) => {
  const spinSize =
    size === 'small' ? 'small' : size === 'large' ? 'large' : 'middle';

  if (children) {
    return (
      <Spin spinning={spinning} size={spinSize} tip={text}>
        {children}
      </Spin>
    );
  }

  return (
    <div
      className={`flex min-h-[200px] flex-col items-center justify-center p-8 ${className}`}
    >
      <Spin size={spinSize} />
      {text && (
        <Text type="secondary" style={{ marginTop: 16, fontSize: 14 }}>
          {text}
        </Text>
      )}
    </div>
  );
};
